<template>
  <div>
    <div class="pad-l-20 pad-r-20">
      <span class="span-member">项目招募:<span class="span-member-1 font-blue" v-if="taskMemberCount">{{ taskMemberCount.hireNum }}</span></span>
      <span class="span-member-2">|</span>
      <span class="span-member">报名:<span class="span-member-1 font-blue" v-if="taskMemberCount">{{ taskMemberCount.enrolmentNum }}</span></span>
      <span class="span-member-2">|</span>
      <span class="span-member">待签约:<span class="span-member-1 font-blue" v-if="taskMemberCount">{{ taskMemberCount.hiredNum }}</span></span>
      <span class="span-member-2">|</span>
      <span class="span-member">已签约:<span class="span-member-1 font-blue" v-if="taskMemberCount">{{ taskMemberCount.signingNum }}</span></span>
    </div>
    <div class="pad-20">
      <el-table :data="taskMemberList" @sort-change="sortChange" @selection-change="handleSelectionChange"
                v-loading="listLoading" element-loading-text="加载中"
                style="width: 100%">
        <el-table-column min-width="200px" label="报名人" prop="userInfo">
          <template slot-scope="scope">
            <div class="flex v-align-c">
              <label><img :src="scope.row.avatar" class="user-avatar" v-if="scope.row.avatar"></label>
              <div class="font-14 pad-l-10">
                <div>昵称：{{scope.row.nickname}}</div>
                <div>姓名：{{scope.row.realName}}</div>
              </div>
            </div>
          </template>
        </el-table-column>

        <el-table-column width="120" label="手机" prop="phone">
        </el-table-column>
        <el-table-column width="100" label="性质">
          <template slot-scope="scope">
            <el-tag>{{ natures[scope.row.nature] }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column width="100" label="状态">
          <template slot-scope="scope">
            <el-tag type="warning">{{ scope.row.statusName }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column width="100" label="是否组长">
          <template slot-scope="scope">
            <el-tag type="success">{{ leaderFlags[scope.row.leaderFlag] }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column width="160" label="申请时间" prop="createTime">
        </el-table-column>
        <el-table-column width="160" label="选择时间" prop="employTime">
        </el-table-column>
        <el-table-column width="160" label="拒绝签约原因" prop="remark">
        </el-table-column>
        <el-table-column width="250" label="操作">
          <template slot-scope="scope">
            <template v-if="status == '1'">
              <el-button type="primary" size="mini" @click="handleStatus(scope.row, 3)">选TA</el-button>
              <el-button type="danger" size="mini" @click="handleStatus(scope.row, 4)">拒绝</el-button>
            </template>
            <template v-else>
              <el-button type="danger" size="mini" @click="handleStatus(scope.row, 4)" v-if="scope.row.status === 3">取消录用</el-button>
              <el-button type="primary" size="mini" @click="handleTemplate(scope.row)" v-if="scope.row.status === 5">查看合同</el-button>
            </template>
            <el-button type="primary" plain size="mini" @click="handleDetails(scope.row)">查看资料</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 列表分页 -->
      <div class="pagination">
        <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
                      :current-page="taskMemberListQuery.currentPage"
                      :page-sizes="[10, 20, 50, 100]" :page-size="taskMemberListQuery.size"
                      layout="total, sizes, prev, pager, next, jumper"
                      :total="total">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<style scoped>
  .span-member {
    font-size: 15px;
  }
  .span-member-1 {
    margin-left: 10px;
    margin-right: 10px;
  }
  .span-member-2 {
    margin-right: 10px;
  }
  .user-avatar{
    width: 46px;
    height: 46px;
    display: block;
    border-radius: 50px;
  }
</style>

<script>
  import { pagingTaskMember, updateTaskMember, checkInfoNum } from '@/api/project/taskMember'
  import { countTaskMember } from '@/api/project/taskInfo'
  // 岗位 需求微客列表
  export default {
    props: {
      //  任务id
      taskId: {
        type: String
      },
      status: {
        type: String
      }
    },
    data() {
      return {
        taskMemberList: [],
        leaderFlags: [],
        natures: [],
        statuss: {},
        total: null,
        listLoading: true,
        multipleSelection: [],
        taskMemberListQuery: {
          currentPage: 1,
          size: 10,
          positionId: '',
          status: this.status,
          taskId: this.taskId
        },
        taskMember: {},
        taskMemberCount: {
          postNum: 0,
          hireNum: 0,
          enrolmentNum: 0,
          signingNum: 0,
          hiredNum: 0
        }
      }
    },
    // 初始化页面
    created() {
      this.initTaskMemberList()
    },
    methods: {
      initTaskMemberList() {
        this.listLoading = true
        pagingTaskMember(this.taskMemberListQuery).then(response => {
          this.taskMemberList = response.records
          for (let a = 0; a < this.taskMemberList.length; a++) {
            this.taskMemberList[a].userInfo = {}
            this.taskMemberList[a].userInfo.avatar = this.taskMemberList[a].avatar
            this.taskMemberList[a].userInfo.nickname = this.taskMemberList[a].nickname
            this.taskMemberList[a].userInfo.realName = this.taskMemberList[a].realName
          }
          if (response.dict) {
            this.natures = response.dict.nature
            this.leaderFlags = response.dict.leaderFlag
          }
          if (response.dict) {
            this.statuss = response.dict.status
          }
          if (this.taskMemberList) {
            for (let i = 0; i < this.taskMemberList.length; i++) {
              const val = this.taskMemberList[i].status
              this.taskMemberList[i].statusName = this.statuss[val]
            }
          }
          this.total = response.total
          this.listLoading = false
        })
        countTaskMember(this.taskId).then(response => {
          this.taskMemberCount = response.data
        })
      },
      // 列表排序
      sortChange(data) {
        const { prop, order } = data
        if (prop === 'createTime') {
          if (order === 'ascending') {
            this.taskMemberListQuery.ascs = 'createTime'
            this.taskMemberListQuery.descs = ''
          } else {
            this.taskMemberListQuery.ascs = ''
            this.taskMemberListQuery.descs = 'createTime'
          }
        }
        this.initTaskMemberList()
      },
      handleSearch() {
        this.taskMemberListQuery.currentPage = 1
        this.initTaskMemberList()
      },
      handleSizeChange(val) {
        this.taskMemberListQuery.size = val
        this.initTaskMemberList()
      },
      handleCurrentChange(val) {
        this.taskMemberListQuery.currentPage = val
        this.initTaskMemberList()
      },
      handleSelectionChange(val) {
        this.multipleSelection = val
      },
      handleClick() {
        this.initTaskMemberList()
      },
      // 查看
      handleDetails(row) {
        this.$router.push({ path: '/user/member/details/index', query: { memberId: row.memberId }})
      },
      // 查看合同模板
      handleTemplate(row) {
        this.$router.push({ path: '/project/task/contractTemplate/index', query: { taskId: this.taskId, memberId: row.memberId }})
      },
      // 录用
      handleStatus(row, parms) {
        if (parms === 3) {
          this.$confirm('是否录用TA?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            const taskMember = {
              taskMemberId: row.taskMemberId,
              status: parms,
              taskId: this.taskId
            }
            // 判断录用人数是否小于等于项目需求人数
            checkInfoNum(this.taskId).then(response => {
              if (response.isError) return
              if (response.data === true) {
                this.saveTaskMember(taskMember)
              } else {
                this.$message({
                  message: '录用人数已满，无需再录用',
                  type: 'success'
                })
              }
            })
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消'
            })
          })
        }
        if (parms === 4) {
          this.$prompt('请填写取消录用TA理由', '', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            customClass: 'new-calss-input',
            inputType: 'textarea',
            inputPlaceholder: '请输入内容'
          }).then(({ value }) => {
            const taskMember = {
              taskMemberId: row.taskMemberId,
              status: parms,
              cancelRemark: value,
              taskId: this.taskId
            }
            this.saveTaskMember(taskMember)
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消'
            })
          })
        }
      },
      // 更新微客要求状态
      saveTaskMember(taskMember) {
        // 后台保存
        updateTaskMember(taskMember).then(response => {
          if (response.isError) return
          this.$message({
            type: 'success',
            message: name + '成功!'
          })
          this.initTaskMemberList()
          const that = this
          that.$bus.$emit('TaskMemberChange')
        })
      }
    }
  }
</script>
